<template>
    <div id="temp">
        <!--图片详情标题部分  -->
        <h3>{{imgInfo.title}}</h3>
        <p class="date">{{imgInfo.add_time | datefmt("YYYY-MM-DD HH:mm:ss")}} &nbsp;
            <span>{{imgInfo.click}}次浏览</span>
        </p>
        <hr/>
    
        <!--图片缩略图展示部分  -->
        <div class="mui-content smallImg">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item, index) in smallImage" :key="index">
                    <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, smallImage)">
                </li>
            </ul>
        </div>
    
        <hr/>
        <div v-html="imgInfo.content" id="infoCtt"></div>
    
        <!--评论组件部分  -->
        <comment :id="id"></comment>
    </div>
</template>
<script>
//导入全局域名
import common from '../../kits/common.js';

//导入提示小组件
import { Toast } from 'mint-ui';

//导入评论子组件
import comment from '../subcomponents/comment.vue'

export default {
    data() {
        return {
            id: 0,
            imgInfo: {},
            smallImage: []
        }
    },
    components: {
        comment
    },
    created() {
        this.id = this.$route.params.id;
        this.getImageInfo();
        this.getSmallImage();
    },
    methods: {
        //获得图片详情
        getImageInfo() {
            this.$http.get("http://182.254.146.100:8899/api/getimageInfo/" + this.id)
                .then(function (res) {
                    if (res.body.status != 0) {
                        Toast({
                            message: res.body.message,
                            duration: 3000
                        });
                        return;
                    }
                    this.imgInfo = res.body.message[0];
                })
        },


        //获得图片缩略图
        getSmallImage() {
            this.$http.get("http://182.254.146.100:8899/api/getthumimages/" + this.id)
                .then(function (res) {
                    if (res.body.status != 0) {
                        Toast({
                            message: res.body.message,
                            duration: 3000
                        });
                        return;
                    }
                    this.smallImage = res.body.message;
                    this.smallImage.forEach(function (v) {
                        var img = document.createElement("img");
                        img.src = v.src;
                        v.w = img.width;
                        v.h = img.height;
                    })
                })
        }
    }
}
</script>
<style scoped>
#temp {
    padding: 4%;
}

h3 {
    font: 18px/20px "Microsoft Yahei";
    color: #26a2ff;
    font-weight: 800;
}

.date {
    margin: 10px 0;
    font-size: 13px;
    color: #cdcdcd;
}




#infoCtt {
    font-size: 14px;
}
</style>


